<template>
	<view>
		<view class="YouRan-UI-XuanXiangKa-2 Flex Bj-BeiJingSe" style="margin-bottom: 0;">
			<view class="XunHuan Flex" @click="DianJi_QieHuan_Tab(1)">
				<text :class="QieHuanKa==1?'Zi H3 H3-Line':'Zi H3 H3-Line Zt-ZhanWeiSe'">关注的人</text>
			</view>
			<view class="XunHuan Flex" @click="DianJi_QieHuan_Tab(2)">
				<text :class="QieHuanKa==2?'Zi H3 H3-Line':'Zi H3 H3-Line Zt-ZhanWeiSe'">Ta们的帖子</text>
			</view>
		</view>
		<template v-if="QieHuanKa==1">
			<view class="YouRan-UI-LieBiao-10">
				<template v-if="YouRan_UI_LieBiao_10_JiaZai_ZhuangTai=='YouShuJu'">
					<view
						@click="$_TiaoZhuan('_XiangQing_YongHu/_XiangQing_YongHu?uid='+item.uid)"
						v-for="item in YouRan_UI_LieBiao_10"
						class="XunHuan Flex">
						<view class="Zuo">
							<image :src="item.avatar" mode="widthFix"></image>
						</view>
						<view class="Zhong">
							<view class="NiCheng H2">
								{{item.nickname}}
								<text class="P">{{item.roleName}}</text>
							</view>
							<view class="P">
								
								<text>{{item.stats.postPublishCount}}帖子</text>
								<text>{{item.stats.followMeCount}}关注</text>
								<text>{{item.stats.likeMeCount}}点赞</text>
							</view>
						</view>
						<view class="You Flex">
							<view
								@click.stop="YouRan_UI_LieBiao_10_DianJi_CaoZuo('follow',item)"
								class="Bj-BianKuangSe Zt-YuanSe">
								{{
									item.interaction.followStatus?
									"已关注":"关注"
								}}
							</view>
							<view
								@click.stop="YouRan_UI_LieBiao_10_DianJi_CaoZuo('like',item)"
								class="Bj-BianKuangSe Zt-YuanSe">
								{{
									item.interaction.likeStatus?
									"已点赞":"点赞"
								}}
							</view>
							<view
								@click.stop="YouRan_UI_LieBiao_10_SiLiao_DuiHua_DianJi(item.nickname,item.uid)"
								class="Bj-LanSe"
								style="color: #FFF;">私聊</view>
						</view>
					</view>
					<view
						v-if="YouRan_UI_LieBiao_10_JiaZai_ZhuangTai_JiaZaiGengDuo"
						@click="YouRan_UI_LieBiao_10_FangFa('FanYe')"
						class="H3 H3-Line Bj-BeiJingSe Zt-ZhanWeiSe Flex"
						style="padding: 35rpx 0;text-align: center;margin: 25rpx;justify-content: center;border-radius: 100rpx;">点击加载更多</view>
				</template>
				<template v-if="YouRan_UI_LieBiao_10_JiaZai_ZhuangTai=='JiaZaiZhong'">
					<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
				</template>
				<template v-if="YouRan_UI_LieBiao_10_JiaZai_ZhuangTai=='WuShuJu'">
					<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 50rpx 0;">
						<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
						<view class="Zt-ZhanWeiSe">暂无任何数据</view>
					</view>
				</template>
			</view>
			<view
				class="YouRan-UI-LieBiao-10-SiLiao-DuiHuaKuang"
				v-if="YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang">
				<view class="Shang" @click="YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang = false">
					<text>对 {{YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang_nickname?YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang_nickname:'Ta'}} 说</text>
					<text class="iconfont icon-close-bold"></text>
				</view>
				<view class="Xia">
					<input maxlength="-1" type="text" v-model="YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang_Vmodel">
					<text></text>
					<view @click="YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang_FangFa">发送</view>
				</view>
			</view>
		</template>
		<template v-if="QieHuanKa==2">
			<view class="YouRan-UI-LieBiao-2">
				<template v-if="GuanZhuRen_De_TieZi_ZhuangTai=='YouShuJu'">
					<view
						@click="$_TiaoZhuan('_XiangQing_TieZi/_XiangQing_TieZi?pid='+item.pid)"
						class="XunHuan" v-for="item in GuanZhuRen_De_TieZi">
						<!-- 块.1 - 用户展示 -->
						<view class="YouRan-UI-YongHu-1 Flex">
							<view class="Zuo">
								<view class="TouXiang">
									<image :src="item.creator.avatar" mode="widthFix"></image>
								</view>
								<view class="YouXia Bj-LanSe" v-if="item.creator.roleName=='普通会员'">普</view>
								<view class="YouXia Bj-HongSe" v-if="item.creator.roleName=='管理员'">管</view>
							</view>
							<view class="Zhong">
								<view class="Zhong-Shang">
									<view class="NiCheng H2">{{item.creator.nickname}}</view>
								</view>
								<view class="Zhong-Xia Flex">
									<text class="P">{{item.creator.roleName}}</text>
									<text class="P">{{item.createTimeFormat}}</text>
								</view>
							</view>
							<view class="You Flex">
								<view class="AnNiu Flex">
									<text class="iconfont icon-add"></text>
									<text class="P">关注</text>
								</view>
							</view>
						</view>
						<view
							class="BiaoTi"
							v-if="item.title">{{item.title}}</view>
						<!-- 文字摘要 -->
						<view
							class="ZhaiYao H2">{{$_GuoLv_HTML(item.content)}}</view>
						<!-- 图片列表 -->
						<view
							class="TuPian Flex" v-if="item.fileCount.images">
							<view
								v-for="(item_Tu,index) in item.files.images">
								<image :src="item_Tu.imageSquareUrl" mode="widthFix"></image>
							</view>
						</view>
						<!-- 视频列表 -->
						<view class="ShiPin" v-if="!item.fileCount.images && item.fileCount.videos">
							<view class="_FengMian">
								<image :src="item.files.videos[0].videoPosterUrl" mode="widthFix"></image>
							</view>
							<text class="Flex iconfont icon-play"></text>
						</view>
						<!-- 评论列表 -->
						<view
							class="PingLun Flex"
							v-if="item.previewComments">
							<view class="_TouXiang">
								<image :src="item.previewComments[0].creator.avatar" mode="widthFix"></image>
							</view>
							<view class="_NiCheng">{{item.previewComments[0].creator.nickname}}:</view>
							<view class="_NeiRong YiHang">{{$_GuoLv_HTML(item.previewComments[0].content)}}</view>
						</view>
						<!-- 帖子类型 -->
						<view class="LeiXing Flex">
							<text class="Bj-LanSe iconfont icon-tupian" v-if="item.fileCount.images"></text>
							<text class="Bj-HongSe iconfont icon-zhibo" v-if="item.fileCount.videos"></text>
							<text class="Bj-LvSe iconfont icon-yuyin" v-if="item.fileCount.audios"></text>
						</view>
						<!-- 尾部图标 -->
						<view class="TuBiao Flex">
							<view class="Flex">
								<text class="iconfont icon-comment"></text>
								<text class="Zi">{{item.commentCount}}</text>
							</view>
							<view class="Flex">
								<text class="iconfont icon-good"></text>
								<text class="Zi">{{item.likeCount}}</text>
							</view>
							<view class="Flex">
								<text class="iconfont icon-favorite"></text>
								<text class="Zi">{{item.followCount}}</text>
							</view>
						</view>
					</view>
					<view
						v-if="GuanZhuRen_De_TieZi_ZhuangTai_JiaZaiGengDuo"
						@click="QingQiu_GuanZhuRen_De_TieZi('FanYe')"
						class="H3 H3-Line Bj-BeiJingSe Zt-ZhanWeiSe Flex"
						style="padding: 35rpx 0;text-align: center;margin: 25rpx;justify-content: center;border-radius: 100rpx;">点击加载更多</view>
				</template>
				<template v-if="GuanZhuRen_De_TieZi_ZhuangTai=='JiaZaiZhong'">
					<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
				</template>
				<template v-if="GuanZhuRen_De_TieZi_ZhuangTai=='WuShuJu'">
					<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 50rpx 0;">
						<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
						<view class="Zt-ZhanWeiSe">暂无任何数据</view>
					</view>
				</template>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:"YouRan-UI-GuanZhu-LieBiao",
		props:{
			
		},
		data() {
			return {
				QieHuanKa:1,
				YouRan_UI_LieBiao_10:[],
				YouRan_UI_LieBiao_10_MoRen_YeMa:2,
				YouRan_UI_LieBiao_10_JiaZai_ZhuangTai:"JiaZaiZhong",
				YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang_nickname:"",
				YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang_uid:"",
				YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang:false,
				YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang_Vmodel:"",
				YouRan_UI_LieBiao_10_JiaZai_ZhuangTai_JiaZaiGengDuo:false,
				
				GuanZhuRen_De_TieZi:[],
				GuanZhuRen_De_TieZi_YeMa:2,
				GuanZhuRen_De_TieZi_ZhuangTai:"JiaZaiZhong",
				GuanZhuRen_De_TieZi_ZhuangTai_JiaZaiGengDuo:false
			};
		},
		mounted(){
			uni.$on('BiaoQing_LieBiao_HuiTiao',(data) => {
				this.YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang_Vmodel += data.msg
			})
			this.YouRan_UI_LieBiao_10_FangFa();
		},
		methods:{
			// 列表.10 - 列表.10 - 用户列表
			YouRan_UI_LieBiao_10_FangFa(e){
				let FanYe = e;
				if(FanYe){uni.showLoading({ title: "加载中" });}
				this.$_QingQiu(
					"GET","/api/v2/user/"+uni.getStorageSync('YongHuXinXi').data.detail.uid+"/mark/follow/users",
					{
						"whitelistKeys":"uid,avatar,nickname,roleName,stats.postPublishCount,stats.followMeCount,stats.likeMeCount,interaction.followStatus,interaction.likeStatus",
						"pageSize":15,
						"page":FanYe ? this.YouRan_UI_LieBiao_10_MoRen_YeMa : ""
					},
					(res) => {
						if(FanYe){
							if(res.data.data.list.length){
								this.YouRan_UI_LieBiao_10 = this.YouRan_UI_LieBiao_10.concat(res.data.data.list)
								this.YouRan_UI_LieBiao_10_MoRen_YeMa++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							if(res.data.data.paginate.total > res.data.data.paginate.pageSize){
								this.YouRan_UI_LieBiao_10_JiaZai_ZhuangTai_JiaZaiGengDuo = true
							}
							this.YouRan_UI_LieBiao_10 = res.data.data.list;
							if(this.YouRan_UI_LieBiao_10.length){
								this.YouRan_UI_LieBiao_10_JiaZai_ZhuangTai = "YouShuJu"
							}else{
								this.YouRan_UI_LieBiao_10_JiaZai_ZhuangTai = "WuShuJu"
							}
						}
					}
				)
			},
			// 列表.10 - 列表.10 - 用户列表 - 点击 - 私聊
			YouRan_UI_LieBiao_10_SiLiao_DuiHua_DianJi(nickname,uid){
				this.YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang_nickname = nickname;
				this.YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang_uid = uid;
				this.YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang = true;
			},
			// 列表.10 - 列表.10 - 用户列表 - 私聊对话框 - 方法
			YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang_FangFa(){
				uni.showLoading({ title: "发送中" });
				this.$_QingQiu(
					"POST","/api/v2/conversation/send-message",
					{
						"uidOrUsername":this.YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang_uid.toString(),
						"message":this.YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang_Vmodel
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							this.YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang_Vmodel = "";
							uni.showToast({
								title:"发送成功",
								icon:"none",
								duration:1000
							});
							this.YouRan_UI_LieBiao_10_SiLiao_DuiHua_Kuang = false
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 列表.10 - 列表.10 - 用户列表 - 操作 - 方法
			YouRan_UI_LieBiao_10_DianJi_CaoZuo(LeiXing,item){
				uni.showLoading();
				this.$_QingQiu(
					"POST","/api/v2/user/mark",
					{
						"interactionType":LeiXing,
						"markType":"user",
						"fsid":item.uid.toString()
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							this.YouRan_UI_LieBiao_10_FangFa();
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			DianJi_QieHuan_Tab(e){
				this.QieHuanKa = e;
				if(e == 2){
					this.QingQiu_GuanZhuRen_De_TieZi()
				}
			},
			QingQiu_GuanZhuRen_De_TieZi(e){
				let FanYe = e;
				if(FanYe){uni.showLoading({ title: "加载中" });}
				this.$_QingQiu(
					"GET","/api/v2/post/follow/user",
					{
						"whitelistKeys":"pid,creator.avatar,creator.roleName,creator.nickname,createTimeFormat,title,content,fileCount,files,commentCount,likeCount,followCount,previewComments.0.creator.avatar,previewComments.0.creator.nickname,previewComments.0.content",
						"page":FanYe ? this.GuanZhuRen_De_TieZi_YeMa : ""
					},
					(res) => {
						if(FanYe){
							if(res.data.data.list.length){
								this.GuanZhuRen_De_TieZi = this.GuanZhuRen_De_TieZi.concat(res.data.data.list)
								this.GuanZhuRen_De_TieZi_YeMa++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							if(res.data.data.paginate.total > res.data.data.paginate.pageSize){
								this.GuanZhuRen_De_TieZi_ZhuangTai_JiaZaiGengDuo = true
							}
							this.GuanZhuRen_De_TieZi = res.data.data.list;
							if(this.GuanZhuRen_De_TieZi.length){
								this.GuanZhuRen_De_TieZi_ZhuangTai = "YouShuJu"
							}else{
								this.GuanZhuRen_De_TieZi_ZhuangTai = "WuShuJu"
							}
						}
					}
				)
			}
		}
	}
</script>

<style>

</style>